<template>
  <div id="head">
    <div class="width-100 bg-c-d8e head-login-box">
      <div class="container fix">
        <div class="flo-right">
          <span class="font-c-a5a">服务热线：400-6078-099</span>
          <a href="#/helpcenter" class="help-center">帮助中心</a>
          <button class="login" @click="loginFn">{{loginText}}</button>
          <button class="register" @click="registerFn">{{registerText}}</button>
        </div>
      </div>
    </div>
    <div class="width-100 bg-c-013 head-logo-box">
      <div class="container fix">
        <div class="flo-left">
          <a href="#/"><img src="../assets/logo.png" alt=""></a>
        </div>
        <form action="" class="flo-right">
          <input type="text" class="search-text" placeholder="搜索内容">
          <div class="dib search-btn cup">
            <input type="button">
            <i class="iconfont icon-sousuo rel"></i>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  methods: {
    loginFn() {
      if (this.$store.state.isLogin) {
        this.$router.push('/personalcenter/aptitude')
      } else {
        this.$router.push('/login')
      }
    },
    registerFn() {
      if (this.$store.state.isLogin) {
        this.$router.push('/login')
        this.$store.dispatch('getLoginOut').then(data => {
          if (data.data.httpCode === 200) {
            this.$toasted.show('退出成功')
          } else {
            this.$toasted.show(data.data.msg)
          }
        }, err => {
          console.log(err)
        })
      } else {
        this.$router.push('/register')
      }
    }
  },
  computed: {
    loginText() {
      if (this.$store.state.isLogin) {
        return this.$store.state.userInfo.account
      } else {
        return '登录'
      }
    },
    registerText() {
      if (this.$store.state.isLogin) {
        return '退出'
      } else {
        return '注册'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.head-login-box .flo-right {
  margin-right: 24px;
  line-height: 40px;
}

.head-login-box .flo-right span,
.head-login-box .flo-right a {
  margin-right: 30px;
  display: inline-block;
}

.head-login-box button {
  color: #023fa1;
}

.head-login-box a.help-center {
  color: #a5a5a5;
}

.head-logo-box {
  padding: 11px 0;
}

.head-logo-box .flo-lleft img {
  width: 259px;
  height: 38px;
}

.head-logo-box .search-text {
  width: 261px;
  line-height: 32px;
  margin-top: 3px;
  border: 1px solid #fff;
  background-color: #01378c;
  padding: 0 10px;
  color: #fff;
  border-radius: 3px 0 0 3px;
}

.head-logo-box .search-btn {
  width: 41px;
  line-height: 34px;
  height: 34px;
  margin-top: 3px;
  vertical-align: top;
  background-color: #ffffff;
  margin-left: -4px;
  border-radius: 0 3px 3px 0;
}

.head-logo-box .search-btn input {
  background: transparent;
}

.head-logo-box .search-btn i {
  font-size: 19px;
  left: 50%;
  margin-left: -25px;
}

.bg-c-d8e {
  background-color: #d8e7ff;
}

.bg-c-013 {
  background-color: #01378c;
}

input::-webkit-input-placeholder {
  color: #fff;
}

</style>
